import { pokerActivateAwardInfo } from "@/service";
import { Button, Modal, Table } from "antd";
import { useEffect, useState } from "react";

export default function RankingList(props: any) {
  const { open, setOpen, activateId } = props;

  // 初始化 tableConfig 状态
  const [tableConfig, setTableConfig] = useState<any>({
    dataSource: [],
    joinGoodName: "", // 参与奖名称
    joinGoodNum: 0,   // 参与奖数量
    columns: [
      {
        title: "名次",
        dataIndex: "rank",
        key: "rank",
        width: 100,
        align: "center" as const,
      },
      {
        title: "奖励",
        dataIndex: "awardContent",
        key: "awardContent",
        align: "center" as const,
        width: 500,
        render: (v: any) => {
          try {
            const arr = JSON.parse(v || "[]");
            return (
              <div
                style={{
                  display: "flex",
                  flexWrap: "wrap",
                  gap: "4px",
                }}
              >
                {arr?.map((item: any) => (
                  <div
                    key={item?.goodId}
                    style={{
                      border: "1px solid #ccc",
                      padding: "2px 8px",
                      borderRadius: "4px",
                      backgroundColor: "#f9f9f9",
                      whiteSpace: "nowrap",
                    }}
                  >
                    {item?.name} *{item?.num}
                  </div>
                ))}
              </div>
            );
          } catch (e) {
            console.error("解析奖励内容失败", e);
            return null;
          }
        },
      },
    ],
    scroll: {
      y: 300,
      x: "100%",
    },
    pagination: false,
  });

  // 获取排名奖励数据
  const getRankList = async () => {
    if (!activateId) return;

    try {
      const res = await pokerActivateAwardInfo({ activateId });
      const awardList = res.awardList || [];
      const joinGoodName = res.joinGoodName || "";
      const joinGoodNum = res.joinGoodNum || 0;

      setTableConfig({
        dataSource: awardList,
        joinGoodName,
        joinGoodNum,
        columns: [
          {
            title: "名次",
            dataIndex: "rank",
            key: "rank",
            width: 100,
            align: "center" as const,
          },
          {
            title: "奖励",
            dataIndex: "awardContent",
            key: "awardContent",
            align: "center" as const,
            width: 500,
            render: (v: any) => {
              try {
                const arr = JSON.parse(v || "[]");
                return (
                  <div
                    style={{
                      display: "flex",
                      flexWrap: "wrap",
                      gap: "4px",
                    }}
                  >
                    {arr?.map((item: any) => (
                      <div
                        key={item?.goodId}
                        style={{
                          border: "1px solid #ccc",
                          padding: "2px 8px",
                          borderRadius: "4px",
                          backgroundColor: "#f9f9f9",
                          whiteSpace: "nowrap",
                        }}
                      >
                        {item?.name} *{item?.num}
                      </div>
                    ))}
                  </div>
                );
              } catch (e) {
                console.error("渲染奖励内容出错", e);
                return null;
              }
            },
          },
        ],
        scroll: {
          y: 300,
          x: "100%",
        },
        pagination: false,
      });
    } catch (error) {
      console.error("获取活动奖励信息失败", error);
    }
  };

  // 激活 ID 改变时重新加载数据
  useEffect(() => {
    if (activateId) {
      getRankList();
    }
  }, [activateId]);

  // 关闭弹窗
  const onCancel = () => {
    setOpen(false);
  };

  return (
    <Modal
      title="排名奖励"
      width={1200}
      open={open}
      onCancel={onCancel}
      maskClosable={false}
      className="rankingListModal"
      footer={[
        <Button key="back" onClick={onCancel}>
          取消
        </Button>,
      ]}
    >
      <div className="rankingListInner">
        {/* 展示参与奖 */}
        {tableConfig.joinGoodName && (
          <div
            style={{
              marginBottom: "16px",
              padding: "12px",
              backgroundColor: "#f0f8ff",
              border: "1px solid #d6e9f8",
              borderRadius: "4px",
              fontSize: "14px",
              color: "#333",
            }}
          >
            参与奖：<strong>{tableConfig.joinGoodName}</strong> *{" "}
            {tableConfig.joinGoodNum}
          </div>
        )}

        {/* 表格内容 */}
        <Table {...tableConfig} rowKey={(record) => record.id} />
      </div>
    </Modal>
  );
}